<template>
  <div>
    <ConTitle :info="info"></ConTitle>
    <el-card class="box-card">
      <!-- <div class="text-item">
        <span class="sp1">标签</span
        ><el-input
          class="inputt"
          v-model="input"
          placeholder="超级用户"
        ></el-input>
        <div class="beizhu">
          <span class="sp1">访问权限</span
          ><el-input class="inputt1" v-model="input" placeholder="8"></el-input>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
          </el-form>
        </div> -->
      <div class="text-item">
        <!-- 表单 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item class="inputt1" label="标签" prop="tag">
            <el-input type="text" v-model="ruleForm.tag"></el-input>
          </el-form-item>
          <el-form-item class="inputt1" label="访问权限" prop="authority">
            <el-input
              type="text"
              v-model="ruleForm.authority"
              width="200"
            ></el-input>
          </el-form-item>
          <el-form :inline="true" :model="formInline" class="inputt1">
            <el-form-item class="sp1" label="密钥状态">
              <el-select v-model="formInline.region" placeholder="未使用">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">确认</el-button>
            <el-button @click="resetForm()">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $safeAdd, $safeEdit } from "@/api/index";
export default {
  name: "AddSafe",
  data() {
    return {
      info: {
        path: "子账号/",
        text: "账户信息",
        msg: "-可添加当前组织的子账号，并为其分配权限。",
      },
      ruleForm: {
        tag: "",
        authority: "",
      },
      formInline: {
        region: "",
      },
      rules: {
        tag: [
          { required: true, message: "请输入测量类型名称", trigger: "blur" },
        ],
        authority: [
          { required: true, message: "请输入测量类型单位", trigger: "blur" },
        ],
      },
      editId: "", //空 代表添加   ，非空 就是修改
      cTime: 0, //创建时间
    };
  },
  components: {
    ConTitle,
  },
  mounted() {
    console.log(this.$route.query);
    let { id, tag, authority, cTime } = this.$route.query;
    if (id) {
      this.ruleForm.tag = tag;
      this.ruleForm.authority = authority;
      this.info.text = "修改测量类型";
      this.editId = id;
      this.cTime = cTime;
    }
  },
  watch: {
    $route({ query }) {
      console.log(query);
      if (query) {
        this.ruleForm.tag = "";
        this.ruleForm.authority = "";
        this.info.text = "添加测量类型";
        this.editId = "";
      }
    },
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 判断是添加还是修改
          if (this.editId == "") {
            $safeAdd(this.ruleForm).then((res) => {
              console.log(res);
              if (res.data.msg == "success") {
                this.$message({
                  message: "",
                  type: "success",
                  duration: 500,
                });
              }
            });
          } else {
            $safeEdit({
              id: this.editId,
              cTime: +this.cTime,
              ...this.ruleForm,
            }).then((res) => {
              console.log(res);
              if (res.data.msg == "success") {
                this.$message({
                  message: "恭喜你，修改",
                  type: "success",
                  duration: 500,
                });
              }
            });
          }

          // 页面跳转到列表页
          this.$router.push("/safe/safelist");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      // 清空表单
      this.ruleForm.tag = "";
      this.ruleForm.authority = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.sp1 {
  font-weight: 900;
}
.sp {
  margin-left: 80px;
}
.box-card {
  margin-top: 10px;
}
.text {
  margin-top: 20px;
}
.inputt {
  margin-left: 35px;
  width: 300px;
}
.inputt1 {
  margin-left: 10px;
  width: 300px;
}
.inputt2 {
  width: 250px;
}
.text-item {
  margin-left: 100px;
}
</style>